<template>
  <div>
<!--    <el-menu-->
<!--      :default-active="activeIndex"-->
<!--      class="el-menu-demo"-->
<!--      mode="horizontal"-->
<!--      @select="handleSelect"-->
<!--      background-color="#545c64"-->
<!--      text-color="#fff"-->
<!--      active-text-color="#ffd04b">-->
<!--      <el-menu-item index="0" style="margin-right: 15%">文件列表</el-menu-item>-->
<!--      <el-menu-item index="1" style="margin-right: 15%">数据监控</el-menu-item>-->
<!--      <el-menu-item index="2" style="margin-right: 15%">任务信息</el-menu-item>-->
<!--      <el-menu-item index="3" style="margin-right: 15%">受试者列表</el-menu-item>-->
<!--      <el-menu-item index="4" >设备管理</el-menu-item>-->
<!--    </el-menu>-->

    <top-list :activeIndex="2+''"></top-list>
    <el-row style="margin-top: 20px">
      <el-col :offset="1">
        <h4 style="font-size: 20rem;">采样率</h4>
      </el-col>

      <el-col :offset="1">
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="sampleRate" placeholder="采样率"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitSampleRate()" :disabled="!isResearchRole">更新采样率</el-button>
          </el-form-item>
          <el-form-item>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="1">
        <h4 style="font-size: 20rem;">
          实验文档
        </h4>
      </el-col>
      <el-col :offset="1" :span="2">
        <el-upload
          class="upload-demo"
          :action="url"
          :limit="1"
          :data="param"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :disabled="!isResearchRole"
        >
          <el-button  size="small" type="primary" plain :disabled="!isResearchRole">实验文档更新</el-button>
        </el-upload>
      </el-col>
      <el-col :span="2">
        <a :href="getDownloadUrl()" @click="getDownloadUrl" style="text-decoration:underline;font-size: 15rem" v-if="this.researchDataForm.experimentSpecification">实验文档下载</a>
<!--        <el-button v-if="researchDataForm.experimentSpecification" size="small" type="primary" plain @click="download">实验文档下载</el-button>-->
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="1" style="margin-top: 30px">
        <h4 style="font-size: 20rem;">
          任务信息
        </h4>
      </el-col>
      <el-col :offset="1" style="margin-top: 5px">
        <el-button plain type="primary" @click="taskEdit(0)" :disabled="!isResearchRole">添加</el-button>
      </el-col>
      <el-col :span="4" v-for="(item) in tasktable" :key="item.taskId" :offset="1">
        <div style="margin-top:15px">
          <el-card :body-style="{ padding: '0px',background:'#ffffff',height:'300px'}" shadow="hover">
            <el-descriptions :column="1" style="background: #ffffff" border>
              <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="实验任务名称">
                {{ item.experimentName }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="实验任务时长">
                {{ item.experimentDuration }}分钟
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="实验任务类型">
                {{ item.testeeState == 0 ? '静息态' : '任务态' }}
              </el-descriptions-item>
            </el-descriptions>
            <el-button round plain type="primary" size="mini" icon="el-icon-edit" @click="taskEdit(item.id)"
                       style="margin-top: 60px" :disabled="!isResearchRole"></el-button>
            <el-button round plain type="primary" size="mini" icon="el-icon-delete"
                       @click="taskDelete(item.id,item.experimentName)" :disabled="!isResearchRole"></el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <task-update v-if="updateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></task-update>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import taskUpdate from './task-update.vue'
import task from '@/api/task'
import research from '@/api/research'
import TaskUpdate from './task-update'
import file from '@/api/file'
import myUtils from '../../api/myUtils'
import TopList from '@/components/TopList'
export default {
  components: { TaskUpdate,TopList },
  data() {
    return {


      updateVisible: false,
      tasktable: [],
      activeIndex: '2',
      dataForm: {},
      param: {
        type: 'specification'
      },
      researchDataForm: {
        experimentSpecification:""
      },
      downloadUrl:"",
      sampleRate:null,
      isResearchRole:false,
      url:""

    }

  },
  created() {
    this.getDataList()
    this.getResearchId()
    this.getDownloadUrl();
    let role = myUtils.getRole(this.$route.query.subjectPkId,this.$store.getters.roles,this.$store.getters.isSystemAdministrator);
    if(role == 2 || role ==3 || role ==6 || role ==7)
    {
      this.isResearchRole = true;
    }
    this.url = process.env.BASE_API+"/file/uploadFile"
    let width = document.body.clientWidth;
    // console.log(width)
    let fontsize = (width / 2203)
    document.documentElement.style.fontSize = fontsize + "px"
  },
  watch:{

  },
  methods: {
    getDownloadUrl()
    {
      console.log(this.researchDataForm)
      this.downloadUrl = process.env.BASE_API + '/file/downloadFile?filePath='+ this.researchDataForm.experimentSpecification
      return this.downloadUrl
    },
    // download()
    // {
    //   console.log(this.researchDataForm.experimentSpecification)
    //   file.download(this.researchDataForm.experimentSpecification)
    // },
    uploadError() {

    },
    getResearchId() {
      research.getBysubjectPkId(this.$route.query.subjectPkId).then(
        response => {
          if (response.code == '000000') {//@这样写感觉是有一个bug在这里，就是在上传失败的时候，researchDataForm里的值改变了。其实也好解决就是在进行更改之后再次使用一次getResearchId
            this.researchDataForm.id = response.data.id
            this.researchDataForm.experimentSpecification = response.data.experimentSpecification
            this.sampleRate = response.data.sampleRate
          }
        }
      )
    },
    uploadSuccess(response, file, fileList) {
      if (this.researchDataForm.id) {
        this.researchDataForm.subjectPkId = this.$route.query.subjectPkId
        this.researchDataForm.experimentSpecification = response.data
        //console.log(this.researchDataForm)
        research.updateSearchDoc(this.researchDataForm).then(
          response2 => {
            if (response2.code === '000000') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 700
              })
            } else {
              this.$message.error('上传失败')
            }

          }
        )

      }

    },
    submitSampleRate() {
      research.getBysubjectPkId(this.$route.query.subjectPkId).then(
        (response1) => {
          if (response1.code == '000000') {
            //this.researchDataForm.id = response1.data.id
            //this.researchDataForm.subjectPkId = this.$route.query.subjectPkId
            research.updateSearchSampleRate(response1.data.id,this.sampleRate,this.$route.query.subjectPkId).then(
              response2 => {
                if (response2.code === '000000') {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 700
                  })
                } else {
                  this.$message.error('更新失败')
                }

              }
            )
          }
        }
      )

    },

    handleSelect(key, keyPath) {
      if(key==='0')
      {
        this.$router.push({path:`/upload/file-list?subjectPkId=${this.$route.query.subjectPkId}`})
      }
      if(key==='1')
      {
        // this.$router.push(0)
        this.$router.push({path:`/upload/research-manager?subjectPkId=${this.$route.query.subjectPkId}`})
      }
      else if(key==='2')
      {
        this.$router.push({path:`/upload/task?subjectPkId=${this.$route.query.subjectPkId}`})
      }
      else if(key==='3')
      {
        this.$router.push({path:`/upload/subject-manager?subjectPkId=${this.$route.query.subjectPkId}`})
      }
      else if(key==='4')
      {
        this.$router.push({path:`/upload/device?subjectPkId=${this.$route.query.subjectPkId}`})
      }
    },
    taskEdit(id) {

      this.updateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
      //@refreshDataList="getDataList 在人人fast这里的 组件标签这里 @refreshDataList="getDataList” 在子组件汇总可以用this.$emit("refreshDataList"); 来调用父组件的getDataList方法
    },
    taskDelete(id, experimentName) {
      this.$confirm(
        `确定对[任务名为：${experimentName}]进行删除操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        task.researchExperiment(id).then(({ code }) => {
          if (code === '000000') {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 700,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })

      })

    },
    getDataList() {
      task.experimentSearch(this.$route.query.subjectPkId).then(response => {
        this.tasktable = response.data.records
      })
    }

  }

}
</script>
<style>
.my-label {
  background: #E1F3D8;
}


.my-content {
  background: #dcddde;
}

</style>
